<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover" class="mgb20" style="height: 252px">
          <div class="user-info">
            <el-avatar :size="120" :src="userStore.avatarUrl" />
            <div class="user-info-cont">
              <div class="user-info-name">{{ roleName }}</div>
              <div>昵称：{{ userStore.nickname }}</div>
              <div>邮箱：{{ user_email }}</div>
            </div>
          </div>
          <div class="user-info-list">
            登录时间：
            <span>{{ date }}</span>
          </div>
          <div class="user-info-list">
            登录地点：
            <span>{{ address }}</span>
          </div>
        </el-card>
        <el-card shadow="hover" style="height: 252px">
          <template #header>
            <div class="clearfix">
              <span>语言详情</span>
            </div>
          </template>
          Vue
          <el-progress :percentage="79.4" color="#42b983"></el-progress>
          TypeScript
          <el-progress :percentage="14" color="#f1e05a"></el-progress>
          CSS
          <el-progress :percentage="5.6"></el-progress>
          HTML
          <el-progress :percentage="1" color="#f56c6c"></el-progress>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <div class="grid-con-icon">
                  <base-icon base-icon="icon-24gl-userGroup" class="dash_pv"></base-icon>
                </div>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ pv }}</div>
                  <div>用户访问量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <div class="grid-con-icon">
                  <base-icon base-icon="icon-zuozhe" class="dash_ip"></base-icon>
                </div>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ ip }}</div>
                  <div>独立ip访问量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <div class="grid-con-icon">
                  <base-icon base-icon="icon-liuyan3" class="dash_word"></base-icon>
                </div>
                <div class="grid-cont-right">
                  <div class="grid-num">{{ word }}</div>
                  <div>留言数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card shadow="hover" style="height: 403px">
          <template #header>
            <div class="clearfix">
              <span>待办事项</span>
              <el-button style="float: right; padding: 3px 0" text>添加</el-button>
            </div>
          </template>

          <el-table :show-header="false" :data="todoList" style="width: 100%">
            <el-table-column width="40">
              <template #default="scope">
                <el-checkbox v-model="scope.row.status"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column>
              <template #default="scope">
                <div
                  class="todo-item"
                  :class="{
                    'todo-item-del': scope.row.status,
                  }"
                >
                  {{ scope.row.title }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header> 标签-文章数量 </template>
          <v-chart class="chart" :option="pie" ref="pieRef" autoresize />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header> 文章浏览量/曝光量(前5) </template>
          <v-chart class="chart" :option="bar" ref="barRef" autoresize />
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header> 最近一周访客数量/ip数量 </template>
          <v-chart class="chart" :option="line" ref="lineRef" autoresize />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="dashboard">
  import { reactive, ref, onMounted } from 'vue'
  import { sessionCache } from '@/utils/cache'
  import { use } from 'echarts/core'
  import { CanvasRenderer } from 'echarts/renderers'
  import { PieChart, BarChart, LineChart } from 'echarts/charts'
  import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent } from 'echarts/components'
  import { pie } from './option/pie'
  import { bar } from './option/bar'
  import { line } from './option/line'
  import { querySystemRequest, queryBarRequest, queryRecentDataRequest, queryPieRequest } from '@/network/api/dash-api'
  import VChart from 'vue-echarts'
  import useUserStore from '@/store/user'
  use([CanvasRenderer, PieChart, BarChart, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, ToolboxComponent])
  const userStore = useUserStore()
  const userInfo = sessionCache.getCache('userInfo')
  const { date, address, roleName, user_email } = userInfo
  const todoList = reactive([
    {
      title: '今天要修复100个bug',
      status: false,
    },
    {
      title: '今天要修复100个bug',
      status: false,
    },
    {
      title: '今天要写100行代码加几个bug吧',
      status: false,
    },
    {
      title: '今天要修复100个bug',
      status: false,
    },
    {
      title: '今天要修复100个bug',
      status: true,
    },
    {
      title: '今天要写100行代码加几个bug吧',
      status: true,
    },
  ])
  const pv = ref<number>()
  const ip = ref<number>()
  const word = ref<number>()
  const pieRef = ref<any>(null)
  const barRef = ref<any>(null)
  const lineRef = ref<any>(null)
  onMounted(async () => {
    console.log(userInfo)

    // 访问量和ip统计
    const { result } = await querySystemRequest()
    pv.value = result.pv
    ip.value = result.ip
    word.value = result.word

    // 柱形图
    const barResult = await queryBarRequest()
    barRef.value.setOption({
      xAxis: [
        {
          data: barResult.result.article,
        },
      ],
      series: [
        {
          data: barResult.result.exposure,
        },
        {
          data: barResult.result.browse,
        },
      ],
    })

    // 折线图
    const pvCount = <any>[]
    const ipCount = <any>[]
    let xData = <any>[]
    const lineResult = await queryRecentDataRequest()
    lineResult.result.pvArr.forEach((item: any) => {
      pvCount.push(item.value)
    })
    lineResult.result.ipArr.forEach((item: any) => {
      xData.push(item.date)
      ipCount.push(item.value)
    })
    lineRef.value.setOption({
      xAxis: {
        data: xData,
      },
      series: [
        {
          data: pvCount,
        },
        {
          data: ipCount,
        },
      ],
    })

    // 饼图
    const pieResult = await queryPieRequest()
    pieRef.value.setOption({
      legend: {
        data: pieResult.result.legend,
      },
      series: [
        {
          data: pieResult.result.data,
        },
      ],
    })
  })
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }

  .grid-content {
    display: flex;
    align-items: center;
    height: 100px;
  }

  .grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
  }

  .grid-num {
    font-size: 30px;
    font-weight: bold;
  }

  .grid-con-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
  }

  .grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
  }

  .grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
  }

  .grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
  }

  .grid-con-2 .grid-num {
    color: rgb(100, 213, 114);
  }

  .grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
  }

  .grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
  }

  .user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
  }

  .user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
  }

  .user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
  }

  .user-info-list span {
    margin-left: 70px;
  }

  .mgb20 {
    margin-bottom: 20px;
  }

  .todo-item {
    font-size: 14px;
  }

  .todo-item-del {
    text-decoration: line-through;
    color: #999;
  }

  .chart {
    width: 100%;
    height: 500px;
  }
</style>
